<!DOCTYPE html>
<html>

<head>
	<!-- 页面meta -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>黑马面面</title>
	<meta name="description" content="黑马面面">
	<meta name="keywords" content="黑马面面">
	<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
	<!-- 引入样式 -->
	<link rel="stylesheet" href="../css/element-ui.css">
	<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="../css/style.css">
</head>

<body class="hold-transition">
	<div id="app">
		<div class="content-header common-search-border1">
			<el-button class="butAdd" @click="handleCreate"><i class="fa fa-plus" aria-hidden="true"></i>
				新增标签</el-button>
			<el-button class="butAdd" @click="goToCourseView"><i class="fa fa-arrow-left" aria-hidden="true"></i>
				返回学科</el-button>
		</div>
		<div class="app-container">
			<div class="box common-search-border2">
				<div class="filter-container">
					<!-- 搜索栏 -->
					<el-form :inline="true" :model="requestParameters" ref="requestParameters" class="formInfo"
						label-width="70px">
						<el-form-item label="标签名称" prop="name">
							<el-input placeholder="请输入" v-model="requestParameters.name" style="width: 200px;"
								class="filter-item"></el-input>
						</el-form-item>
						<el-form-item label="状态" prop="status" prop="status">
							<el-select placeholder="请选择" v-model="requestParameters.status">
								<el-option :key="item.id" :label="item.value" :value="item.id"
									v-for="item in baseData.isDis"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button @click="handleRest">清除</el-button>
							<el-button type="primary" class="butOK" @click="handleSearch">搜索</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div class="box common-table-border" style="margin:8px 0 0;">
				<el-table :data="items" fit highlight-current-row style="width: 100%;">
					<el-table-column label="序号" align="center" width="50px">
						<template slot-scope="scope">
							<span>{{ scope.$index+1 }}</span>
						</template>
					</el-table-column>
					<el-table-column label="标签名称" align="center">
						<template slot-scope="scope">
							<span class="link-type">{{ scope.row.name }}</span>
						</template>
					</el-table-column>
					<el-table-column label="创建者" align="center">
						<template slot-scope="scope">
							<span>{{ scope.row.creator }}</span>
						</template>
					</el-table-column>
					<el-table-column label="创建日期" align="center">
						<template slot-scope="scope">
							<span class="link-type">{{ scope.row.createDate | dateTransform }}</span>
						</template>
					</el-table-column>
					<el-table-column label="面试题数量" align="center">
						<template slot-scope="scope">
							<span>{{ scope.row.questionQty }}</span>
						</template>
					</el-table-column>
					<el-table-column label="状态" align="center">
						<template slot-scope="scope">
							<span>{{ scope.row.status === 0 ? '启用': '禁用' }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="400px">
						<template slot-scope="scope">
							<div class="operation">
								<el-button type="primary" size="mini" @click="handleUpdate(scope.row)"><i
										class="fa fa-pencil-square-o" aria-hidden="true"></i> 修改
								</el-button>
								<!-- 修改前端禁用按钮代码 -->
								<el-button v-if="scope.row.status === 0" type="primary" size="mini"
									@click="handleDisable(scope.row)">
									<i class="fa fa-pencil-square-o" aria-hidden="true"></i> 禁用
								</el-button>
								<el-button v-else type="primary" size="mini" @click="handleEnable(scope.row)">
									<i class="fa fa-pencil-square-o" aria-hidden="true"></i> 启用
								</el-button>
								</el-button>
								<el-button size="mini" type="danger" @click="handleDeleted(scope.row)"><i
										class="fa fa-trash-o" aria-hidden="true"></i>
									删除
								</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
				<div class="pagination-container">
					<el-pagination class="pagiantion" v-show="pagination.total>0" @size-change="handleSizeChange"
						@current-change="handleCurrentChange" :current-page="pagination.pageNum"
						:page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
					</el-pagination>
				</div>
			</div>
			<!-- 新增标签弹层 -->
			<el-dialog title="新增标签" :visible.sync="dialogFormVisible" width="40%" top="8vh">
				<el-form label-width="120px" :model="form" :rules="rules" ref="form">
					<el-form-item label="标签：" prop="name">
						<el-input v-model="form.name" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="handleCancel">取 消</el-button>
					<el-button type="primary" @click="handleConfirm">确 定</el-button>
				</div>
			</el-dialog>
			<!-- end -->
		</div>
	</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../js/element-ui.js"></script>
<script src="../plugins/jquery/dist/jquery.js"></script>
<script src="../js/data.json"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/base.js"></script>
<script>
	new Vue({
		el: '#app',
		data() {
			return {
				pagination: {
					total: 0,
					pageNum: 1,
					pageSize: 10
				},
				loading: false,
				items: [],
				baseData: base,
				requestParameters: {
					name: '',
					status: ''
				},
				dialogFormVisible: false,
				form: {
					id: 0,
					name: '',
					courseId: 0
				},
				rules: {
					name: [{
						required: true,
						message: '请填写',
						trigger: 'blur'
					}]
				}
			}
		},
		created() {
			this.form.courseId = parseInt(this.getUrlParam("courseId"), 10);
			this.getList();
		},
		filters: {
			dateTransform: (value) => {
				if(value==null){
					return "";
				}
				let index = value.lastIndexOf('.');
				return index > 0 ? value.substr(0, index) : value.substr(0, 10);
			}
		},
		methods: {
			//获取url参数
			getUrlParam(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]);
				return null;
			},
			getList() {
				let t = this;

				// 必传参数
				let params = {
					currentPage: t.pagination.pageNum,
					pageSize: t.pagination.pageSize,
					queryParams: {
						courseId: t.form.courseId
					}
				};
				// 选传参数
				let name = t.requestParameters.name;
				if (name) {
					params.queryParams.name = name;
				}
				let status = t.requestParameters.status;
				if (status !== '') {
					params.queryParams.status = status;
				}
				console.log("学科标签分页列表请求参数：");
				console.log(params);
				// 发送请求
				axios.post(app_path + '/tag/findListByPage.do', params).then((result) => {
					if (result.data.flag) {
						//分页处理请求成功
						this.pagination.total = result.data.result.total;
						//更新当前页数据列表
						this.items = result.data.result.rows;
						t.loading = true;

					} else {
						this.$message.error(result.data.message)
					}

				})



			},
			// 清除
			handleRest() {
				if (this.$refs['requestParameters']) {
					this.$refs['requestParameters'].resetFields();
				}
			},
			//搜索
			handleSearch() {
				this.getList();
			},
			handleSizeChange(val) {
				this.pagination.pageSize = val;
				this.pagination.pageNum = 1;
				this.getList();
			},
			handleCurrentChange(val) {
				this.pagination.pageNum = val;
				this.getList();
			},
			// 学科管理
			goToCourseView() {
				window.location.href = "courseList.html";
			},
			// 新增标签
			handleCreate() {
				if (this.$refs['form']) {
					this.$refs['form'].resetFields();
				}
				this.dialogFormVisible = true;
			},

			//新增学科确定
			handleCreateConfirm() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						//在点击添加课程按钮时，
						//友好的正确消息提示框
						// this.$message({
						// 	message:'验证通过',
						// 	type: 'success'	
						// });


					}
				});
			},
			//新增标签取消
			handleCreateCancel() {
				this.dialogFormVisible = false;
			},
			// 修改标签
			handleUpdate(row) {
				if (this.$refs['form']) {
					this.$refs['form'].resetFields();
				}
				this.form.id = row.id;
				this.form.name = row.name;
				console.log(this.form);
				this.dialogFormVisible = true;
			},
			handleConfirm() {
				if (!this.form.id) {
					this.handleCreateConfirm();
				} else {
					this.handleUpdateConfirm();
				}
			},
			//新增标签确定
			handleCreateConfirm() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						let params = this.form;
						console.log("标签添加请求参数：");
						console.log(params);
						// 发送请求
						//this.$message.success("新增成功");
						//this.dialogFormVisible = false;
						//this.getList();
						// 发送请求
						axios.post(app_path + '/tag/add.do', this.form)
							.then((result) => {
								if (result.data.flag) {
									//添加成功
									this.$message({
										message: '添加学科标签成功',
										type: 'success'
									});
									//刷新页面数据
									this.getList()
									//将新增学科弹出对话框隐藏，并清空表单数据
									if (this.$refs['form']) {
										this.$refs['form'].resetFields();
									}
									this.dialogFormVisible = false;//隐藏对话框
								} else {
									this.$message({
										message: result.data.message,
										type: 'error'
									});
								}
							}).catch((err) => {

								this.$message({
									message: err.message,
									type: 'error'
								});
								return false;


							});
					} else {

						this.$message({
							message: '还没有输入相应学科标签，请输入-----',
							type: 'error',

						});
						return false;
					}
				});
			},


			// 修改标签确定
			handleUpdateConfirm() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						axios.post(app_path + '/tag/update.do', this.form)
							.then((result) => {
								if (result.data.flag) {
									this.$message.success('修改学科标签成功');
									this.dialogFormVisible = false;
									this.getList();
								} else {
									this.$message.error(result.data.message);
								}
							})
					} else {
						console.log('error submit!!');
						return false;
					}
				});

				this.getList();
			},

			// 新增/修改标签取消
			handleCancel() {
				this.dialogFormVisible = false;
			},
			// 禁用标签
			handleDisable(row) {
				let t = this;
				this.$confirm('此操作将禁用该标签, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					console.log('禁用标签ID:', row.id);  // 调试信息
					axios.post(app_path + '/tag/disable', { id: row.id })
						.then(response => {
							let res = response.data;
							console.log('禁用响应:', res);  // 调试信息
							if (res === "目录禁用成功") {
								t.$message({
									type: 'success',
									message: '禁用成功!'
								});
								t.getList();
							} else {
								t.$message.error(res);
							}
						})
						.catch(error => {
							console.log(error);
							t.$message.error("禁用失败");
						});
				}).catch(() => {
					t.$message({
						type: 'info',
						message: '已取消禁用'
					});
				});
			},
			// 启用标签
			handleEnable(row) {
				let t = this;
				this.$confirm('此操作将启用该标签, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					console.log('启用标签ID:', row.id); // 调试信息
					axios.post(app_path + '/tag/enable', {
						id: row.id
					}).then(response => {
						let res = response.data;
						console.log('启用响应:', res); // 调试信息
						if (res === "目录启用成功") {
							t.$message({
								type: 'success',
								message: '启用成功!'
							});
							// 更新状态
							row.status = 0;
						} else {
							t.$message.error(res);
						}
					}).catch(error => {
						console.log(error);
						t.$message.error("启用失败");
					});
				}).catch(() => {
					t.$message({
						type: 'info',
						message: '已取消启用'
					});
				});
			},




			// 删除标签
			handleDeleted(row) {
				this.$confirm('此操作将永久删除该学科标签, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//点击了确定进入的函数
					//获取删除的学科标签id
					let tagId = row.id;
					//alert(tagId);

					//发送异步请求进行删除操作
					axios.get(app_path + `/tag/delete.do?tagId=${tagId}`)
						.then(result => {

							if (result.data.flag) {
								this.$message.success(result.data.message);
								this.getList();
							} else {
								this.$message.error(result.data.message);
							}
						})

				}).catch(() => {
					//点击了取消进入的函数
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		}

	})
</script>

</html>